<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <!--
            Ajax
            Aynchronous Javascript And XML 异步js和XML, 可以在不跳转页面的情况下和服务器交互(可以只请求页面的一部分内容), 用来描述通过脚本操作HTTP请求的web应用架构
        -->
        <!--
            HTTP: Hyper Text Transport Protocol 超文本传输协议
            规定了web浏览器如何向web服务器提交数据和获取数据, 以及服务器如何响应这些请求和提交
            包含请求和响应两部分
        -->
        请输入QQ号码: <input type="text" id="qq">
        <button id="btn">测吉凶</button>
    
        <ul>
            <li>得分</li>
            <li>描述</li>
            <li>级别</li>
            <li>分析</li>
        </ul>


    </body>
</html>
<script>

    function ajax(str) {
        var xhr = new XMLHttpRequest();
        var url = "http://route.showapi.com/863-1?showapi_appid=35585&showapi_sign=249e47ff8d5e4bf7b44d55a42e0163ef&qq=" + str;

        // 每次状态发生改变时, 会调用该函数
        xhr.onreadystatechange = function() {
            if (this.readyState == 0) {
                console.log("UNSENT OPEN方法还没调用");
            } else if (this.readyState == 1) {
                console.log("OPEND OPEN方法已调用");
            } else if (this.readyState == 2) {
                console.log("接收头消息");
            } else if (this.readyState == 3) {
                // 有可能会走多次
                console.log("接收响应体");
            } else {
                // 4 响应完成
                console.log("响应完成");
                // 响应体文本内容
                console.log(this.responseText);
                // 状态码
                console.log(this.status);
                // 状态文本
                console.log(this.statusText);

                var resultObj = JSON.parse(this.responseText);
//                console.log(resultObj);

                var showapi_res_body = resultObj["showapi_res_body"];
                console.log(showapi_res_body);
                var desc = showapi_res_body["desc"];
                var grade = showapi_res_body["grade"];
                var score = showapi_res_body["score"];
                var analysis = showapi_res_body["analysis"];
//                console.log(desc);


                // 获取所有li
                var lis = document.querySelectorAll("li");
                lis[0].innerHTML = "得分: " + score;
                lis[1].innerHTML = "描述: " + desc;
                lis[2].innerHTML = "级别: " + grade;
                lis[3].innerHTML = "分析: " + analysis;


            }
        };

        // 初始化HTTP请求参数, 但并不发送请求
        // 第一个参数: 请求方式 (GET, POST)
        // 第二个参数: 请求的服务器地址
        // 第三个参数: 是否是异步, 如果是true就是异步, false为同步
        xhr.open("GET", url);

        // 开始发送请求
        xhr.send();

        console.log(66666);


        // 断开与服务器的连接
        // xhr.abort();


    }

//    for (var i = 0; i < 10000; i++) {
//        console.log(i);
//    }

    var btn = document.getElementById("btn");
    var qqInput = document.getElementById("qq");

    btn.onclick = function () {
        ajax(qqInput.value);
    };

//    var obj = {
//        name: "小明",
//        child: {
//            desc: "小孩很乖",
//            grade: "五年级"
//        }
//    };
//    var grade = obj["child"]["grade"];

//    var child = obj["child"];
//    var grade = child["grade"];
</script>